<template>
	<view class="search-box" v-show="visible" ref="dialog">
		<uni-search-bar v-model="searchValue" @input="doSearch" :placeholder="placeholder"></uni-search-bar>
		<uni-list class="center-list" v-if="listData.length>0">
			<checkbox-group @change="checkboxChange" class="uni-list">
				<label class="con_list" v-for="(item, index) in listData" :key="index">
					<uni-list-item :showArrow="true" :title="item.title">
						<!-- 自定义 footer-->
						<template slot="footer">
							<view class="item-footer">
								<checkbox :value="item.id+''" :checked="item.checked" />
							</view>
						</template>
					</uni-list-item>
				</label>
			</checkbox-group>

		</uni-list>
		<van-empty v-else description="暂无记录" />
		<view class="btn">
			<button type="default" class="reset" @click="hideFilter">关闭</button>
			<button type="default" class="save" v-if="listData.length>0" @click="chooseItem()">确定</button>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import dictionary from '@/utils/dictionary.js';
	export default {
		name: 'DdSearch',
		props: {
			// visible: {
			//  type: Boolean,
			//  default: false
			// },
			appendToBody: false,
			getSelected: Function
		},
		data() {
			let companyList = dictionary.getPicker('companyList');
			return {
				visible: false,
				keywords: '',
				cacheKey: '',
				searchType: '',
				requestApi: '',
				companyList: companyList,

				// 接口返回的搜索内容
				listData: [],
				// 搜索历史
				searchHistory: [],
				ids: [],
				items: [],
				timeout: null,
				searchValue: "",
				placeholder: "请搜索",
			};
		},
		watch: {
			visible(val) {
				if (val) {
					this.$el.addEventListener('scroll', this.updatePopper);
					this.$nextTick(() => {
						this.$refs.dialog.scrollTop = 0;
					});
					if (this.appendToBody) {
						document.body.appendChild(this.$el);
					}
				} else {
					this.$el.removeEventListener('scroll', this.updatePopper);
					if (this.destroyOnClose) {
						this.$nextTick(() => {
							this.key++;
						});
					}
				}
			}
		},
		beforeMount() {
			this.dictionary = dictionary;
		},
		onLoad() {

		},
		methods: {
			showSearchDialog(searchType, searchIds) {
				let _this = this;
				_this.searchType = searchType;
				_this.visible = true;
				_this.searchValue = ""
				_this.listData = [];
				if (this.searchType == 'company') {
					_this.listData = _this.companyList;
					_this.placeholder = "请搜索执行公司"
					if (searchIds.length > 0) {
						_this.listData = _this.companyList;
						for (var i = 0, lenI = this.listData.length; i < lenI; ++i) {
							let item = this.listData[i];
							if (searchIds.includes(item.id + '')) {
								_this.$set(item, 'checked', true)
							} else {
								_this.$set(item, 'checked', false)
							}
						}

					} else {
						this.companyList.forEach(item => {
							item.checked = false;
						});
						_this.listData = _this.companyList;
					}

				}
				if (this.searchType == 'user') {
					_this.placeholder = "请搜索员工"
					this.requestApi = '/api/ucenter.user/searchDepartmentUserList';
				}
				if (this.searchType == 'hotel') {
					_this.placeholder = "请搜索酒店"
					_this.requestApi = '/api/dictionary.hotel/index';


				}
			},

			checkboxChange(e) {
				let _this = this;
				_this.ids = e.detail.value;
				let arrr = _this.ids.map(Number);
				_this.items = _this.listData.filter(item => arrr.indexOf(item.id) >= 0);
				console.log(_this.items)
				let arr = [];
				arr = _this.ids;
				let items = _this.listData;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					let item = items[i];
					if (arr.includes(item.id + '')) {
						_this.$set(item, 'checked', true)
					} else {
						_this.$set(item, 'checked', false)
					}
				}

			},
			hideFilter() {
				this.visible = false;
			},
			getUserList(e) {
				let _this = this;
				let url = this.requestApi;
				request.request({
					url: url,
					token: true,
					showLoading: true,
					data: {
						keyword: e
					},
					success(res) {
						if (res.code == 200 || res.code == 0) {
							_this.listData = res.data.userList;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '请求失败，请稍后重试'
						});
					}
				});
			},
			getHotelList(e) {
				let _this = this;
				let url = this.requestApi;
				request.request({
					url: url,
					token: true,
					showLoading: true,
					data: {
						keyword: e
					},
					success(res) {
						if (res.code == 200 || res.code == 0) {
							_this.listData = res.data.list;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '请求失败，请稍后重试'
						});
					}
				});
			},
			getCompanyList(e) {
				let _this = this;
				if (e !== '') {
					setTimeout(() => {
						_this.listData = _this.companyList.filter(item => {
							return item.title.toLowerCase().indexOf(e.toLowerCase()) > -1;
						})
					}, 200)

				} else {
					this.listData = []
					this.listData = this.companyList;
				}

			},
			doSearch(e) {
				let _this = this;
				if (_this.searchType == 'company') {
					this.getCompanyList(e);
				}
				if (_this.searchType == 'user') {
					if (_this.timeout) {
						clearTimeout(_this.timeout)
					}
					_this.timeout = setTimeout(function() {
						_this.getUserList(e)
					}, 200)

				}
				if (_this.searchType == 'hotel') {
					if (_this.timeout) {
						clearTimeout(_this.timeout)
					}
					_this.timeout = setTimeout(function() {
						_this.getHotelList(e)
					}, 200)

				}

			},
			// 选择返回
			chooseItem() {
				if (typeof this.getSelected === 'function') {
					console.log(this.items);
					this.getSelected(this.ids, this.searchType, this.items);
					this.visible = false;
				} else {
					uni.showToast({
						icon: "none",
						title: "类型错误"
					})
				}
			},
			// 关闭
			closeDialog() {
				this.visible = false;
			}
		},
		destroyed() {
			if (this.appendToBody && this.$el && this.$el.parentNode) {
				this.$el.parentNode.removeChild(this.$el);
			}
		}
	};
</script>

<style lang="less">
	/deep/ .uni-list {
		margin-bottom: 40px;
	}

	.search-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding: 12px;
		box-sizing: border-box;
		z-index: 1000;
		background-color: #fff;
	}

	.btn {
		width: 100%;
		height: 73upx;
		position: fixed;
		bottom: 33upx;
		display: flex;
		justify-content: center;


		button {
			width: 214upx;
			height: 73upx;
			line-height: 73upx;
			font-size: 28upx;
			border-radius: 37px;
		}

		.reset {
			color: #406ceb;
			border: 1px solid rgba(64, 108, 235, 1);
			background: #ffffff;
		}

		.save {
			background: #406ceb;
			color: #ffffff;
		}
	}
</style>
